/*
 * @Author: Setsuna
 * @Email: setsuna.xyz@qq.com
 * @FilePath: \src\pages\SystemSettings\GeneralConfig\component\AogtimesConfigSetting\components\AddHanderForm.tsx
 * @Date: 2022-03-17 21:22:42
 * @LastEditTime: 2023-08-02 12:06:59
 */
import UdSelect from '@/components/UdFormControls/UdSelect'
import {  UdModalForm, validators ,UdDatePicker} from '@/lib'
 
import { useMount, useRafState } from 'ahooks'
 
import React, { useCallback } from 'react'
 
 
// const { Option } = Select

interface IProps {
  data:object
  brandList: ReadonlyArray<any>
  [Key: string]: any
}

type formValuesType = {
  dataType: string
  [Key: string]: any
}

const CALC_TYPE = {
  'nowAogTimes': '盘点时间',
  'customBillTime': '特殊期间开单', 
}

const AddHanderForm = (props: IProps) => { 
  const {   data,brandList,...rest } = props
  const labelCol: any = { span: 4 } 
  const [formValues, setFormValues] = useRafState<formValuesType>({ dataType: 'nowAogTimes' })
  useMount(() => {  
    if(data){
      let params: formValuesType = {  
        id : data['id'], 
        dataKey : data['dataKey'], 
      dataValue : data['dataValue'], 
 dataStartValue : data['dataStartValue'], 
   dataEndValue : data['dataEndValue'], 
       dataType : data['dataType'], 
         isOpen : data['isOpen'], 
        isCheck : data['isCheck'], 
      }
      setFormValues(params)
    }
  })
 
 

  const getFinancialField = (type = 'nowAogTimes') => {
    console.info(type)
    if (type === 'nowAogTimes') {
      // UdSelect-options =>Object
      return [{ value: 'N', title: '否' },{ value: 'Y', title: '是' }]
    } else {
      // Select-options =>ReactNode
      return [{ value: 'OFF', title: '关闭' },{ value: 'ON', title: '打开' }]
    }
  }

  const getCalcType = () => {
    const keys: ReadonlyArray<any> = Object.keys(CALC_TYPE)
    return keys.map(item => ({ value: item, title: CALC_TYPE[item] }))
  }


  const memoizedGetCalcType = useCallback(getCalcType, [CALC_TYPE]) 
  console.log(formValues);
  let { dataType: type, id: editId } = formValues
  return (
    <UdModalForm
      {...rest}
      key={type}
      labelCol={labelCol}
      values={formValues}
      items={[
        { id: 'dataKey', label: '品牌公司', rules: [validators.required] ,
        render: <UdSelect options={brandList} showSearch={true} optionFilterProp="children" />},
        {
          id: 'dataType',
          label: '取值类型',
          rules: [validators.required],
          render: (
            <UdSelect
              options={memoizedGetCalcType()}
              showSearch={true}
              optionFilterProp="children"
              disabled={editId!=null&&editId!=''}
              onChange={value => {
                setFormValues({ ...formValues, dataType: value })
              }}
            />
          ),
        },
        type === 'nowAogTimes' && { id: 'dataValue', label: '取数周期', rules: [validators.required] }, 
        type === 'customBillTime' && { id: 'dataStartValue', label: '开始时间' ,rules: [validators.required], render: <UdDatePicker format='YYYY-MM-DD 00:00:00'/> },
        type === 'customBillTime' && { id: 'dataEndValue', label: '结束时间' ,rules: [validators.required], render: <UdDatePicker format='YYYY-MM-DD 23:59:59'/> },
        type === 'nowAogTimes' && {
          id: 'isCheck',
          label: '盘点时间是否盘点上月',
          // rules: [validators.required],
          render: <UdSelect options={getFinancialField(type)} showSearch={true} optionFilterProp="children" />,
        },
        type === 'customBillTime' && {
          id: 'isOpen',
          label: '是否开启特殊期间开单',
          // rules: [validators.required],
          render: <UdSelect options={getFinancialField(type)} showSearch={true} optionFilterProp="children" />,
        },
      ].filter(item => typeof item !== 'boolean')}
    />
  )
}

export default React.memo(AddHanderForm)
